import React, { useReducer, useEffect } from 'react'
import './mine.css'
import { Carousel, WingBlank } from 'antd-mobile';
import { reqGetBanner } from '../../request/api';
import { initState, actions, reducer, getData } from './reducer'

import img1 from '../../assets/images/mine_images/icon_1.jpg'
import img2 from '../../assets/images/mine_images/icon_2.jpg'
import img3 from '../../assets/images/mine_images/icon_3.jpg'
import img4 from '../../assets/images/mine_images/icon_4.jpg'

export default function Mine() {
    const [state, dispatch] = useReducer(reducer, initState)
    useEffect(() => {
        reqGetBanner().then(res => {
            if (res.code === 200) {
                dispatch(actions.changeData(res.list))
            }
        })
        setTimeout(() => {
            getData(state)
        }, 500);

    }, [])
    return (
        <div>
            <div className="user">
                <div className="user_l">
                    <img src={import("../../assets/images/mine_images/icon_1.jpg")} alt="" />
                    <div className="name">
                        <div className="name_t">昵  称: {JSON.parse(sessionStorage.userInfo).nickname}</div>
                        <div className="name_b">手机号:  {JSON.parse(sessionStorage.userInfo).phone}</div>
                    </div>
                </div>
                <div className="user_r">
                    <div className="everyday">每日签到</div>
                </div>
            </div>
            <div className="nav">
                <div className="nav_img">
                    <img src={img1} alt="" />待付款
                    </div>
                <div className="nav_img">
                    <img src={img2} alt="" />待收货
                    </div>
                <div className="nav_img">
                    <img src={img3} alt="" />评价
                    </div>
                <div className="nav_img">
                    <img src={img4} alt="" />退款售后
                    </div>
            </div>

            <WingBlank>
                {
                    getData(state).length > 0 ? <Carousel
                        autoplay={true}
                        infinite
                    >
                        {getData(state).map(val => (
                            <img
                                src={val.img}
                                alt=""
                                key={val.id}
                                style={{ width: '100%', verticalAlign: 'top', height: "2rem" }}

                            />
                        ))}
                    </Carousel> : null
                }
            </WingBlank>
            <div className="foo">
                <div className="foo_img">
                    <img src={img1} alt="" />待付款
                    </div>
                <div className="foo_img">
                    <img src={img2} alt="" />待收货
                    </div>
                <div className="foo_img">
                    <img src={img3} alt="" />评价
                    </div>
                <div className="foo_img">
                    <img src={img4} alt="" />退款售后
                    </div>
                <div className="foo_img">
                    <img src={img2} alt="" />待收货
                    </div>
                <div className="foo_img">
                    <img src={img3} alt="" />评价
                    </div>
                <div className="foo_img">
                    <img src={img4} alt="" />退款售后
                    </div>

            </div>
        </div>
    )
}

